import { useState } from "react";
import Rect3d from "./Rect3d";
import { Tabs } from "antd";
import styles from "./index.less";
import { PageWrapper } from "@/components/PageWrapper";
import Text3d from "./Text3d";
import TikTok3d from "./TikTok";
const { TabPane } = Tabs;

const tabList = [
  {
    label: "立方体",
    value: <Rect3d />,
    key: "rect3d",
  },
  {
    label: "字体",
    value: <Text3d />,
    key: "text3d",
  },
  {
    label: "抖音logo",
    value: <TikTok3d />,
    key: "tiktok3d",
  },
];

const Animation3D = () => {
  const [curTab, setCurTab] = useState("rect3d");
  return (
    <PageWrapper>
      <div>3d动画</div>
      <Tabs className={styles.cusTab} activeKey={curTab} onChange={setCurTab}>
        {tabList &&
          tabList?.map((v) => (
            <TabPane tab={v.label} key={v.key}>
              {v.value}
            </TabPane>
          ))}
      </Tabs>
    </PageWrapper>
  );
};
export default Animation3D;
